<template>
  <div>
    <Card>
      <div class="split-pane-page-wrapper">
        <vxe-grid
          highlight-hover-row
          show-header-overflow
          show-overflow
          ref="xGrid"
          height="600"
          align="center"
          :columns="tableColumn"
          :data="tableData"
          :toolbar-config="tableToolbar"
          :edit-config="{
            trigger: 'manual',
            mode: 'row',
            showStatus: true,
            icon: 'fa fa-file-text-o',
          }"
        >
          <template #toolbar_buttons>
            <Button
              type="primary"
              icon="md-add"
              style="margin-right: 10px"
              @click="addNewArticle"
              >写文章
            </Button>
            <Button
              type="primary"
              style="margin-right: 10px"
              icon="md-refresh"
              @click="refreshTable"
              >刷新
            </Button>
            <Button
              type="error"
              style="margin-right: 10px"
              @click="deleteList()"
              >批量删除
            </Button>
          </template>
          <template #operate="{ row }">
            <Button
              type="primary"
              style="margin-right: 10px"
              @click="editRow(row)"
              >查看
            </Button>
            <Button
              type="error"
              style="margin-right: 10px"
              @click="deleteRow(row)"
              >删除
            </Button>
          </template>
          <template #pager>
            <div style="text-align: center; padding: 10px">
              <Page
                :current="page.current"
                :total="page.total"
                :page-size="page.pageSize"
                show-elevator
                show-total
                show-sizer
                @on-change="refresh"
              />
            </div>
          </template>
        </vxe-grid>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: '',
      offset: 0.18,
      searchForm: {
        articleType: 1
      },
      // 表格数据
      tableToolbar: {
        zoom: true,
        custom: true,
        slots: {
          buttons: 'toolbar_buttons',
          tools: 'toolbar_tools'
        }
      },
      tableColumn: [
        { type: 'checkbox', width: 40, fixed: 'left' },
        { field: 'title', title: '文章标题' },
        {
          field: 'type',
          title: '文章类型',
          editRender: {
            name: '$select',
            option: [
              { label: '园区公告', value: '1' },
              { label: '园区政策', value: '2' },
              { label: '招商信息', value: '3' }
            ]
          }
        },
        { field: 'viewNum', title: '浏览量' },
        { field: 'releaseTime', title: '发布时间' },
        {
          title: '操作',
          width: 180,
          slots: { default: 'operate' },
          fixed: 'right'
        }
      ],
      page: {
        current: 1,
        total: 100,
        pageSize: 10
      },
      tableData: []
    }
  },
  methods: {
    addNewArticle () {
      this.$router.push({
        name: 'add_article'
      })
    },
    refreshTable () {

    },
    searchArticle () {
      this.$Axios.request({
        method: 'post',
        url: 'article/query',
        data: {
          pageSize: this.page.pageSize,
          pageNum: this.page.current,
          parkId: this.$store.state.user.parkId,
          articleType: this.articleType
        }
      }).then(res => {
        const resData = res.data.msg
        this.page.total = resData.total
        this.tableData = resData.records
      })
    }
  },
  mounted () {
    this.searchArticle()
  }
}
</script>
